<template>
	<view class="content">
		<uni-search-bar placeholder="请输入关键词搜索" radius="100" cancel-button="none" v-model="kw" class="uni-search"
			@confirm="confirm" @clear="clear" />
		<view v-if="blogs.length==0" class="none">
			<image class="nn" src="/static/icons/nodata.png" mode="widthFix"></image>
			<text>{{txtNoData}}</text>
		</view>
		<view v-else v-for="(blog,index) in blogs" :key="blog.id" class="item-container" @click="goto(blog.id)">
			<text class="item-title">{{blog.title}}</text>
			<rich-text :nodes="blog.description" class="item-desc"></rich-text>
			<image :src="blog.picture" mode="widthFix" class="item-focus"></image>
			<image :src="blog.user.avatar" mode="aspectFill" class="item-avatar" @click.stop="showBlogger(blog.user)">
			</image>
			<view>
				<text v-for="(tag,index) in blog.tags" :key="tag" class="item-tag">{{tag}}</text>
			</view>
			<view class="icon-contaniner">
				<!-- <image src="/static/icons/ic_good.png" class="icon" mode=""></image> -->
				<text
					:class="goodIds.indexOf(blog.id) >= 0 ? 'iconfont icon-shoucang ic-red' : 'iconfont icon-shoucang ic-gray'"
					@click.stop="changeGood(blog.id)"></text>
				<text class="icon-text">{{blog.good}}</text>
				<!-- <image src="/static/icons/ic_comment.png" class="icon" mode=""></image> -->
				<text class="iconfont icon-disscuss icon"></text>
				<text class="icon-text">{{blog.comments.length}}</text>
				<image src="/static/icons/ic_count.png" class="icon" mode=""></image>
				<text class="icon-text">{{blog.readCount}}</text>
			</view>
			<!-- <image src="/static/icons/ic_tag.png" class="icon-tag" mode=""></image> -->
			<text class="iconfont icon-xialatubiao icon-tag" @click.stop="drop(blog.id)"></text>
		</view>
		<view class="bottom" v-if="blogs.length==count">
			-----已到底部-----
		</view>
		<dialog-shell title="博主概况" ref="shell">
			<text style="padding: 20rpx;">{{blogger}}</text>
		</dialog-shell>
	</view>
</template>

<script>
	// const req = require("../../utils/reques.js")
	// import params from "../../utils/prams.js"
	export default {
		data() {
			return {
				txtNoData: "没有数据，请下拉刷新!",
				blogs: [],
				page: 0,
				size: 3,
				count: -1,
				searching: false,
				kw: '',
				goodIds: [],
				blogger: ''
			}
		},
		onLoad() {
			//加载数据
			this.$noti.add(this.$params.noti_refresh_count, this.notiCount, this)
			this.$noti.add(this.$params.noti_change_good, this.notoGood, this)
			let ids = uni.getStorageSync(this.$params.key_good_ids);
			if (ids) {
				this.goodIds = ids;
			}

			//读取缓存
			const blogs = uni.getStorageSync(this.$params.key_blogs);
			if (blogs) {
				this.blogs = blogs;
				this.count = blogs.length
				console.log(blogs[0]);
			} else {

				this.getPagedBlogs();
			}
		},
		onUnload() {
			this.$noti.remove(this.$params.noti_refresh_count, this)
			this.$noti.remove(this.$params.noti_change_good, this)
		},
		onPullDownRefresh() {
			this.page = 0
			this.count = -1
			this.blogs = []
			this.kw = ''
			this.getPagedBlogs()
		},
		onReachBottom() {
			if (this.blogs.length == this.count) {
				return
			}
			this.page++
			this.getPagedBlogs()
		},
		methods: {
			refreshComment(cmt){
				this.blogs.forEach(b=>{
					if(b.id==cmt.blogId){
						b.comments=[...b.comments,cmt]
					}
				})
			},
			showBlogger(user) {
				this.blogger = "作者：" + user.nickName + "\n联系方式：" + user.email
				this.$refs.shell.showDialog()
			},
			notoGood(info) {
				let id = info.id
				let count = info.count
				let ids = uni.getStorageSync(this.$params.key_good_ids);
				if (ids) {
					this.goodIds = ids;
				}
				this.blogs.forEach(b => {
					if (b.id == id) {
						b.good = count
					}
				})
			},
			notiCount(info) {
				console.log("接收到通知 refresh count");
				let id = info.id
				let count = info.count
				this.refreshReadCount(id, count)
			},

			refreshReadCount(id, count) {
				this.blogs.forEach(b => {
					if (b.id == id) {
						b.readCount = count
					}
				})
			},

			goto(id) {
				uni.navigateTo({
					url: '../blog/blog?id=' + id,
				});
				console.log(id);
			},
			drop(id) {
				uni.showActionSheet({
					itemList: ["收藏", "删除", "举报"],
					success: res => {
						switch (res.tapIndex) {
							case 0:
								uni.showToast({
									title: '功能待完善'
								});
								break;
							case 1:
								uni.showModal({
									title: '警告',
									content: '确认删除吗？',
									showCancel: true,
									cancelText: '算了',
									confirmText: '删除',
									success: res => {
										if (res.confirm) {
											uni.showToast({
												title: '没有删除权限，请登录！',
												icon: 'none'
											});
										}
									},
									fail: () => {},
									complete: () => {}
								});
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			changeGood(id) {
				let good = true
				if (this.goodIds.indexOf(id) >= 0) {
					good = false
				}
				if (good) {
					this.goodIds = [...this.goodIds, id]
				} else {
					let index = this.goodIds.indexOf(id)
					if (index >= 0) {
						// this.goodIds.splice(index, 1)
						this.goodIds[index] = this.goodIds[this.goodIds.length - 1]
						this.goodIds.pop()
					}
				}
				uni.setStorageSync(this.$params.key_good_ids, this.goodIds)
				this.postGood(id, good)
			},
			postGood(id, good) {
				uni.showLoading({
					title: '点赞……',
					mask: false
				})
				let url = this.$params.host
				let action = good ? this.$params.action_good : this.$params.action_del_good
				url += action
				let data = {
					"id": id
				}
				this.$req.postQuery(url, data, res => {
					console.log(res)
					this.blogs.forEach(blog => {
						if (blog.id == id) {
							blog.good = res.data.data
						}
					})
				}, () => {
					uni.hideLoading()
				})

			},
			confirm(e) {
				// console.log(e);
				// console.log(this.kw);
				let kw = e.value
				if (kw.length > 0) {
					this.searching = true
					this.blogs = []
					this.page = 0
					this.count = -1
					uni.showLoading({
						title: '搜索中',
						mask: false
					});
					this.$req.get(this.$params.host + this.$params.action_search + kw, res => {
						res.data.data.forEach(blog => {
							blog.picture = this.$params.host + blog.picture
							blog.user.avatar = this.$params.host + blog.user.avatar
							this.blogs = [...this.blogs, blog]
						})
					}, () => {
						uni.hideLoading()

					})
				}
			},

			clear() {
				this.searching = false
				this.blogs = []
				this.getPagedBlogs()
			},


			getPagedBlogs() {
				console.log("获取远程数据...");
				let header = {
					"content-type": "application/json;charset=UTF-8",
					"page": this.page,
					"size": this.size
				}
				this.$req.getWithParams(this.$params.host + this.$params.action_blogs_page, header, res => {
					res.data.data.forEach(blog => {
						blog.picture = this.$params.host + blog.picture
						blog.user.avatar = this.$params.host + blog.user.avatar
					})
					// this.blogs=this.blogs.concat(res.data.data)
					this.blogs = [...this.blogs, ...res.data.data]
					this.count = parseInt(res.data.message)
					uni.setStorageSync(this.$params.key_blogs, this.blogs);
				}, () => {
					uni.stopPullDownRefresh()

				})
			},
			getTopBlogs() {
				this.$req.get(this.$params.host + this.$params.action_top_blogs, res => {
					// console.log(res.data);
					res.data.data.forEach(blog => {
						blog.picture = this.$params.host + blog.picture
						blog.user.avatar = this.$params.host + blog.user.avatar
					})
					this.blogs = res.data.data
				})
			}, 
		}
	}
</script>

<style>
	@import url("index.css");
</style>